<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>订单详情</title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="css/orderDetail.css">
        <script src="./js/cookie.js"></script>
        <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="box" v-cloak>
            <div class="contents">
                <header>订单详情</header>
                <div class="orderAllInfo">
                    <div class="infoLeft">
                        <table>
                            <tr>
                                <td class="fontRight">商家名称</td>
                                <td><input type="text" v-model.trim="allData.SHOPNAME" readonly="readonly" class="input1"/></td>
                            </tr>
                            <tr>
                                <td class="fontRight">单号</td>
                                <td><input type="text" v-model.trim="allData.ORDERNO" readonly="readonly" class="input1"/></td>
                            </tr>
                            <tr>
                                <td class="fontRight">用户账号</td>
                                <td><input type="text" v-model.trim="allData.USERNAME" readonly="readonly" class="input1"/></td>
                            </tr>
                            <tr>
                                <td class="fontRight">手机号</td>
                                <td><input type="text" v-model.trim="allData.PHONE" readonly="readonly" class="input1"/></td>
                            </tr>
                            <tr>
                                <td class="fontRight">订单日期</td>
                                <td style="width:330px;">
                                    <input type="text" v-model.trim="value1" readonly="readonly" class="input2"/>
                                    <span style="margin:0 32px 0 5px;">来源</span>
                                    <input type="text" v-model.trim="allData.ORDERSOURCE" readonly="readonly" class="input3"/></td>
                            </tr>
                            <tr>
                                <td class="fontRight">预留车牌号</td>
                                <td style="width:330px;">
                                    <input type="text" v-model.trim="allData.CARNUMBER" readonly="readonly" class="input2"/>
                                    <span style="margin:0 4px 0 5px;">车辆里程</span>
                                    <input type="text" v-model.trim="allData.MILEAGE" readonly="readonly" class="input3"/></td>
                                </td>
                            </tr>
                            <tr>
                                <td class="fontRight">厂牌车型</td>
                                <td><input type="text" v-model.trim="allData.CARBRANDNAME" readonly="readonly" class="input1"/></td>
                            </tr>
                            <tr>
                                <td class="fontRight">用户实付</td>
                                <td style="width:400px;">
                                    <input type="text" v-model.trim="allData.PAYAMOUNT" readonly="readonly" class="common1"/>
                                    <span>结算价格</span>
                                    <input type="text" v-model.trim="allData.SETTLEMENTAMOUNT" readonly="readonly" class="common1"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="fontRight">平台补贴</td>
                                <td style="width:400px;">
                                    <input type="text" v-model.trim="allData.PLATFORMSUBSIDY" readonly="readonly" class="common1"/>
                                    <span>商家补贴</span>
                                    <input type="text" v-model.trim="allData.BUSINESSSUBSIDY" readonly="readonly" class="common1"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="fontRight">核价日期</td>
                                <td style="width:400px;">
                                    <input type="text" v-model.trim="value2" readonly="readonly" class="common1"/>
                                    <span>核价人员</span>
                                    <input type="text" v-model.trim="allData.CHECKER" readonly="readonly" class="common1"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="fontRight">对应工单号</td>
                                <td><input type="text" v-model.trim="allData.CONFIRMNO" readonly="readonly" style="width:250px;height:30px;padding-left:12px;margin-top:5px;"/></td>
                            </tr>
                            <tr>
                                <td class="fontRight">完工日期</td>
                                <td>
                                    <input type="text" v-model.trim="value3" readonly="readonly" class="common1"/>
                                    <span>完工确定</span>
                                    <input type="checkbox"/>
                                    <span>(付完全款才能勾选)</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="fontRight">平台收益</td>
                                <td><input type="text" v-model.trim="allData.CARNTPROFIT" readonly="readonly" class="input1"/></td>
                            </tr>
                        </table>
                    </div>
                    <div class="infoRight">
                        <div class="head">
                            <table cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <th>序号</th>
                                    <th>项目状态</th>
                                    <th>项目大类</th>
                                    <th>&nbsp;商品项目名称&nbsp;</th>
                                    <th>销售价</th>
                                    <th>结算价</th>
                                    <th>数量</th>
                                    <th>确认人</th>
                                    <th>确认时间</th>
                                </tr>
                                <tr v-cloak style="text-align:center;" v-for="(item,index) in orderData">
                                    <td>{{index+1}}</td>
                                    <td v-if="item.STATUS==0">待确认</td>
                                    <td v-else-if="item.STATUS==1">已确认</td>
                                    <td v-else>已取消</td>
                                    <td>{{item.CLASSNAME ? item.CLASSNAME : '--'}}</td>
                                    <td style="color:#0000ee;text-decoration:underline;cursor:pointer;">{{item.SUBJECT ? item.SUBJECT : '--'}}</td>
                                    <td>{{item.PRICE ? item.PRICE : '--'}}</td>
                                    <td>{{item.SETTLEMENTPRICE ? item.SETTLEMENTPRICE : '--'}}</td>
                                    <td>{{item.QUANTITY ? item.QUANTITY : '--'}}</td>
                                    <td>{{item.CONFIRMOPERATOR ? item.CONFIRMOPERATOR : '--'}}</td>
                                    <td>
                                        <span v-if="item.CONFIRMTIME">{{item.CONFIRMTIME|format}}</span>
                                        <span v-else>--</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="payDetail">
                            <p>支付细节明细</p>
                            <table cellpadding="0" cellspacing="0" width="110%">
                                <tr style="background:#f3f3f3;">
                                    <th>序号</th>
                                    <th>支付源</th>
                                    <th>支付/退款</th>
                                    <th>支付流水号</th>
                                    <th>账号/编号</th>
                                    <th>金额</th>
                                    <th>支付状态</th>
                                    <th>收退款日期</th>
                                    <th>线下收款确定</th>
                                </tr>
                                <tr v-cloak style="text-align:center;" v-for="(item,index) in payData">
                                    <td>{{index+1}}</td>
                                    <td v-if="item.PAYSOURCE==4">线下</td>
                                    <td v-else>线上</td>
                                    <td v-if="item.PAYWAY==1">支付宝</td>
                                    <td v-else-if="item.PAYWAY==2">微信</td>
                                    <td v-else-if="item.PAYWAY==3">银联</td>
                                    <td v-else-if="item.PAYWAY==4">现金</td>
                                    <td v-else>代金券</td>
                                    <td>{{item.SERVRECORDNO ? item.SERVRECORDNO : '--'}}</td>
                                    <td>{{item.ACCOUNTNO ? item.ACCOUNTNO : '--'}}</td>
                                    <td>{{item.AMOUNT ? item.AMOUNT : '--'}}</td>
                                    <td v-if="item.STATUS==0">未支付</td>
                                    <td v-else>已支付</td>
                                    <td>
                                        <span v-if="item.CREATETIME" style="white-space:nowrap;">{{item.CREATETIME|format}}</span>
                                        <span v-else>--</span>
                                    </td>
                                    <td>{{item.CONFIRM ? item.CONFIRM : '--'}}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="orderOrigin">
                            <div v-cloak class="orderOriginList" v-for="item in originData">
                                <p>订单来源信息</p>
                                <table cellpadding="0" cellspacing="0" width="100%">
                                    <tr style="background:#f3f3f3;">
                                        <th>来源平台</th>
                                        <th>结算率</th>
                                        <th>结算金额</th>
                                        <th>订单状态</th>
                                        <th>对账状态</th>
                                        <th>对账单号</th>
                                    </tr>
                                    <tr style="text-align:center;">
                                        <td>{{item.PLATFORMSNAME ? item.PLATFORMSNAME : '--'}}</td>
                                        <td>{{item.RATIO ? percentage(item.RATIO) : '--'}}</td>
                                        <td>￥{{item.SETTLEMENTPRICE ? item.SETTLEMENTPRICE : '--'}}</td>
                                        <td v-if="item.SERVBILLCONFIRMID">已对账</td>
                                        <td v-else>未对账</td>
                                        <td v-if="item.BILLSTATUS==1">待确认</td>
                                        <td v-else-if="item.BILLSTATUS==2">已确认</td>
                                        <td v-else-if="item.BILLSTATUS==3">待结算</td>
                                        <td v-else-if="item.BILLSTATUS==4">已结算</td>
                                        <td v-else>--</td>
                                        <td style="color:#0066ff;cursor:pointer;" @click="billDetail(item.order_id)">{{item.CONFIRMNO ? item.CONFIRMNO : '--'}}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footerBtn" style="display:flex;justify-content:center;">
                    <button @click="goBack">取消返回</button>
                    <button @click="excel">导出</button>
                </div>
            </div>
        </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                //getIp1: 'http://192.168.0.180:8085/CARSERV', //测试环境ip
                //getIp1: 'http://carnt.carnettong.com:8088/CARSERV', //正式环境ip
                getIp1: 'http://121.40.78.200:88/CARSERV',
                order_id: '', //订单id
                allData: '', //所有数据
                orderData: [], //订单数据
                payData: [], //支付数据
                originData: [], //订单来源数据
                value1: '', //订单日期
                value2: '', //核价日期
                value3: '', //完工日期
            },
            created: function () {
                let test = window.location.href;
                if (test.indexOf('?') < 0 || test.indexOf('id') < 0) {
                    location.href = './tobeBillOrder.html';
                    return;
                }
                let arr = test.split('?');
                let new_arr = arr[1].split('=');
                this.order_id = new_arr[1];
                //待对账订单详情
                this.$http.post(this.getIp1 + '/PlatformBill/getWaitBillOrderDetail.action', {ORDERID: this.order_id}, {emulateJSON: true}).then(
                        res => {
                            this.allData = res.body;
                            this.orderData = res.body.ORDERDETAILARR;
                            this.payData = res.body.ORDERPAYARR;
                            this.originData = res.body.SETORDERSOURCEARR;
                            this.value1 = res.body.CREATETIME ? this.formatTimes(res.body.CREATETIME) : '';
                            this.value2 = res.body.CHECKTIME ? this.formatTimes(res.body.CHECKTIME) : '';
                            this.value3 = res.body.ARRIVETIME ? this.formatTimes(res.body.ARRIVETIME) : '';
                        }, err => console.log(err)
                );

            },
            computed: {

            },
            methods: {
                //账单详情
                billDetail(val) {
                    if(!val){
                        return;
                    }
                    location.href = './orderDetail.html?order_id='+id;
                },
                //取消返回
                goBack() {
                    history.back();
                },
                //格式
                formatTimes(val) {
                    var y = new Date(val).getFullYear();
                    var m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
                    var d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
                    var h = new Date(val).getHours() >= 10 ? new Date(val).getHours() : '0' + new Date(val).getHours();
                    var ms = new Date(val).getMinutes() >= 10 ? new Date(val).getMinutes() : '0' + new Date(val).getMinutes();
                    return y + "-" + m + "-" + d + " " + h + ":" + ms;
                },
                //百分比
                percentage(val){
                    let b = (val * 100).toFixed(2) + "%";
                    if(val.match('%')){
                        return val;
                    }else{
                        return b;
                    }
                },
                //导出
                excel(){
                    let str1 = 'ORDERID='+this.order_id;
                    console.log(str1);
                    //return;
                    let url = this.getIp1 + '/PlatformBill/getWaitBillOrderDetailExcel.action?' + str1;
                    window.open(url);
                },
            },
            filters: {
                format(val) {
                    var y = new Date(val).getFullYear();
                    var m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
                    var d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
                    var h = new Date(val).getHours() >= 10 ? new Date(val).getHours() : '0' + new Date(val).getHours();
                    var ms = new Date(val).getMinutes() >= 10 ? new Date(val).getMinutes() : '0' + new Date(val).getMinutes();
                    return y + "-" + m + "-" + d + " " + h + ":" + ms;
                },
            },
        });
    </script>
</html>
